<template>
	<view class="competionMsg">
		<view class="main">
			<view class="title">
				{{currentItem.projectName || ''}}
			</view>
			<uni-section title="发布人：" type="line">
				<view class="example-name f16">
					<text class="number">{{currentItem.createName || ''}}</text>
				</view>
			</uni-section>
			<uni-section title="类型：" type="line">
				<view class="example-name f16">
					<text class="number">{{instituteType}}</text>
				</view>
			</uni-section>
			<uni-section title="项目时间：" type="line">
				<view class="example-name f16">
					<view class="number">{{currentItem.projectStartTime || ''}}到
						{{currentItem.projectEndTime || ''}}
					</view>
				</view>
			</uni-section>
			<uni-section title="项目介绍：" type="line">
				<view class="example-name f16">
					<text class="number">{{currentItem.briefly || ''}}</text>
				</view>
			</uni-section>
			<uni-section title="项目类型：" type="line">
				<view class="example-name f16">
					<text class="number">{{currentItem.content || ''}}</text>
				</view>
			</uni-section>
			<uni-section title="项目范围：" type="line">
				<view class="example-name f16">
					<view class="tag">
						<template v-for="item  in  currentItem.tags ">
							<tag :key="item" :name="item" />

						</template>
					</view>
				</view>
			</uni-section>
			<uni-section title="项目投资金额：" type="line">
				<view class="example-name f16">
					<text class="number">{{currentItem.reward || ''}}元</text>
				</view>
			</uni-section>
			<uni-section title="项目来源：" type="line">
				<view class="example-name f16">
					<text class="number">{{currentItem.place || ''}}</text>
				</view>
			</uni-section>
			<uni-section title="项目图片：" type="line" v-if="currentItem.imgUrl.length !==0 ">
				<view class="example-name f16">
					<view>
						<template v-for="(item,index) in currentItem.imgUrl">
							<view class="iamge" @click="showImage(index)">
								<image :src="item" mode="" style="width: 100%;height: 200rpx;"></image>
							</view>
						</template>
					</view>
				</view>
			</uni-section>
			<uni-section title="项目图片：" type="line" v-else>
				<view class="example-name f16">
					<text class="number">无</text>
				</view>
			</uni-section>
			<view class="share">
				<button class="view-yuanjiao" hover-class="bg-click" @click="Collection()"> 收藏 </button>
				<button class="view-yuanjiao" hover-class="bg-click" @click="Share()"> 分享 </button>
			</view>
		</view>
	</view>
</template>

<script>
	import tag from '@/components/tag/index.vue'
	export default {
		name: 'competionMsg',
		components: {
			tag
		},
		data() {
			return {
				instituteType: '',
				currentItem: null,

			};
		},
		methods: {
			showImage(index) {
				const img = this.currentItem.imgUrl[index]
				const url = []
				url.push(img)
				wx.previewImage({
					urls: url, //需要预览的图片http链接列表，多张的时候，url直接写在后面就行了
					current: 1, // 当前显示图片的http链接，默认是第一个
					success: function(res) {},
					fail: function(res) {},
					complete: function(res) {},
				})

			},
			Collection() {
				console.log('收藏')
			},
			Share() {
				console.log('分享')
			}
		},
		mounted() {
			this.$eventBus.$emit('itemMsg')
		},
		created() {
			console.log('mouted');
			this.$eventBus.$on('itemMsgSend', (item, index) => {
				this.currentItem = item
				console.log(item);
				let instituteTypeDesc = ''
				if (item.instituteType == null) {
					instituteTypeDesc = '类型不限'
					this.instituteType = instituteTypeDesc
					return
				}
				switch (item.instituteType) {
					case 0:
						instituteTypeDesc = '文科'
						break;
					case 1:
						instituteTypeDesc = '理科'
						break;
					case 2:
						instituteTypeDesc = '类型不限'
						break;

				}
				this.instituteType = instituteTypeDesc
			})
		},
		destroyed() {
			console.log('destory');
			this.$eventBus.$off('competionMsgSend1')
		}
	}
</script>

<style lang="scss">
	.competionMsg {
		width: 100%;
		height: 100%;
		background-color: #fff;
		box-sizing: border-box;
		overflow-x: hidden;
		padding: 30rpx 20rpx 55rpx 20rpx;

		.main {

			height: auto;

			.example-name {
				padding: 5px 10px;
			}

			.tag {
				display: inline-block;
			}


			.title {
				font-size: 60rpx;
				font-weight: 700;
				text-align: center;
			}

			.time {
				font-size: 35rpx;
				margin: 15rpx 0;

				& .iamge {
					width: 100%;
					height: 200rpx;
					border: 1px solid #ccc;
					border-radius: 15rpx;
					overflow: hidden;
					margin: 25rpx 0;

					& image {
						width: 100%;
						height: 100%;
						object-fit: cover;
						background-position-x: center;
						background-position-y: center;
						background-size: cover;
					}
				}
			}

			.introduction {}

			.tags {}

			.share {
				display: flex;
				justify-content: space-around;
				align-items: center;

				.view-yuanjiao {

					width: 200rpx;
					height: 60rpx;
					display: flex;
					justify-content: center;
					border-radius: 25px;
					line-height: 60rpx;
					background-color: #007AFF;
				}

				.bg-click {
					top: 3upx;
					background-color: #a7a9ff;
				}


			}
		}
	}
</style>
